<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据驱动视图demo</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .demo1{
    	width: 500px;
    	margin: 150px  auto;
    	text-align: center;
    }
    ul{
    	margin-top: 30px;
    }
    li{
    	text-align: center;
    	margin-top: 20px;
    	font-size: 20px;
    	list-style: none;
    }
    </style>
    <script src="vue.min.js"></script>
</head>

<body>
    <div class="demo1">
    	<h1>todos</h1>
    	<div id="app">
	        <input v-model="newTodo" v-on:keyup.enter="addTodo">
	        <ul>
	            <li v-for="todo in todos">
	                <span>{{ todo.text }}</span>
	                <button v-on:click="removeTodo($index)">X</button>
	            </li>
	        </ul>
	    </div>
    </div>

    <script>
	    new Vue({
	        el: '#app',
	        data: {
	            newTodo: '',
	            todos: [{
	                text: '添加点什么吧。。。'
	            }]
	        },
	        methods: {
	            addTodo: function() {
	                var text = this.newTodo.trim()
	                if (text) {
	                    this.todos.push({
	                        text: text
	                    })
	                    this.newTodo = ''
	                }
	            },
	            removeTodo: function(index) {
	                this.todos.splice(index, 1)
	            }
	        }
	    })
    </script>
</body>

</html>
